<template>
	<view class="container" :class="guidanceStep1 || guidanceStep2 || guidanceStep3 ? 'pagefixed' : ''">
		<view v-if="showPageLoading" class="page-loading">
			<BhWaveloading></BhWaveloading>
		</view>
		<!-- v-if="showPageReversing"  -->
		<view v-if="showPageReversing" class="role-reversing">
			<BhWaveloading></BhWaveloading>
		</view>
		<view class="title_view" :style="'height:' + titleHeight + 'px;'">
			<view class="title bh-row bh-justify-space-between " :style="'height:' + titleHeight + 'px;padding-top:' + capsule.top + 'px;padding-right:' + (capsule.width + 15) + 'px'">
				<view @click="selectCity" class="left_arrow_box bh-row">
					<view class="f32 mr10">北京</view>
					<image class="address_down.png" src="../../static/images/home/address_down.png" mode=""></image>
				</view>
				<view class="edit-info bh-row c0" :style="'height:' + (capsule.height - 2) + 'px;'" @click="reverseUserRoleId">{{ userRoleName }}</view>
			</view>
		</view>
		<!-- ////如果是找铺状态的页面 -->
		<!-- 经刚区 -->
		<view v-if="isBuy" class="menu-wrap bh-row bh-justify-space-between mb30" :class="guidanceStep1 ? 'menu-wrap-active' : ''">
			<image v-if="guidanceStep1" class="guidance1" src="../../static/images/home/guidance1.png" mode=""></image>
			<view v-if="guidanceStep1" class="guidanceStep1_view"></view>
			<view class="menu-item" @click="navToPage('/PostPage/post_list_sell/post_list_sell_new')">
				<image class="menu-icon" src="../../static/images/home/home_find_shop.png" mode="scaleToFill" />
				<view class="menu-title">快速找铺</view>
			</view>
			<!-- @click="navToPage('/pages/post_map_list/post_map_list')" -->
			<view class="menu-item" @click="previewGroup1Qr">
				<!-- <image class="menu-icon" src="../../static/images/home/home_map_shop.png" mode="scaleToFill" />
				<view class="menu-title">地图找铺</view> -->
				<image class="menu-icon" src="../../static/images/home/lepuduo_group1_qr.svg" mode="scaleToFill" />
				<view class="menu-title">扫码进群</view>
			</view>
			<view class="menu-item" @click="navToPage('/PostPage/post_list_dealcase/post_list_dealcase')">
				<image class="menu-icon" src="../../static/images/home/home_trans_case.png" mode="scaleToFill" />
				<view class="menu-title">交易案例</view>
			</view>
		</view>
		<!-- 中间banner -->
		<view v-if="isBuy" @click="navToPage('/PostPage/post_add_buy/post_add_buy')" class="lead-wrap bh-row bh-justify-space-between" :class="guidanceStep1 == false && guidanceStep2 ? 'lead-wrap-active' : ''">
			<image v-if="guidanceStep1 == false && guidanceStep2" class="guidance2" src="../../static/images/home/guidance2.png" mode=""></image>
			<view class="lead-title-wrap">
				<view class="lead-title">你要的铺在哪里？</view>
				<view class="lead-sub-title">录入找铺条件，帮您快速找到 >></view>
			</view>
			<image class="lead-img" src="../../static/images/home/home_lead_img.png" mode="scaleToFill" />
		</view>




		<!-- 、、、如果是转店身份状态的页面 identity2-menu-wrap-->
		<!-- 金刚区 -->
		<view v-if="isSell" class=" menu-wrap bh-row bh-justify-space-between mb30" :class="guidanceStep1 ? 'menu-wrap-active' : ''">
			<view class="menu-item" @click="navToPage('/PostPage/post_list_buy/post_list_buy_new')">
				<image class="menu-icon" src="../../static/images/home/home_seek_shop.png" mode="scaleToFill" />
				<view class="menu-title">求铺信息</view>

			</view>

			<view class="menu-item" @click="navToPage('/PostPage/post_list_dealcase/post_list_dealcase')">
				<image class="menu-icon" src="../../static/images/home/home_trans_case.png" mode="scaleToFill" />
				<view class="menu-title">交易案例</view>
			</view>
			<view class="menu-item" style="background: transparent;box-shadow: none;">
				<!-- <image class="menu-icon" src="../../static/images/home/home_map_shop.png" mode="scaleToFill" /> -->
				<view class="menu-icon"></view>
				<view class="menu-title"></view>
			</view>


		</view>
		<!-- 、、、中间banner -->
		<view v-if="isSell" @click="navToPage('/PostPage/post_add_sell/post_add_sell')" class="banner-wrap bh-row bh-justify-space-between" :class="guidanceStep3 ? 'banner-wrap-active' : ''">
			<image v-if="guidanceStep3" class="guidance3" src="../../static/images/home/guidance2.png" mode=""></image>
			<!-- <image class="banner-img" src="../../static/images/home/banner.png" mode="scaleToFill" /> -->
			<image class="banner-img" src="https://bh-cmty-1256284809.cos.ap-beijing.myqcloud.com/lepuduo/banner.png" mode="scaleToFill" />
			
		</view>




		<!-- 、、、、通知 -->
		<!-- @touchmove.stop="" -->
		<view style="position: relative;">
			<swiper class="notice-wrap" @touchmove.stop="" circular="true" vertical="true" autoplay="true" interval="3000" duration="1000">
				<swiper-item v-for="(item, index) in noticeList" :key="index">
					<view style="height: 100%">
						<view class="bh-row bh-align-center" style="height: 100%;">
							<image class="notice-img" src="../../static/images/home/home_notice.svg" mode="scaleToFill" />
							<text class="notice-swiper">{{ item.notice }}</text>
						</view>
					</view>

				</swiper-item>
			</swiper>
			<view style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.01);"></view>
		</view>

		<!-- 找店身份 ----- 优选店铺 -->
		<view class="post-wrap" v-if="isBuy">
			<view class="post-title">优选店铺</view>
			<!-- <BhWaveloading></BhWaveloading> -->

			<view class="post-item" v-for="(item, index) in tabList[0].list" :key="index" @click="toPostDetailSell(item)">
				<!-- <view class="post-item" v-for="(item, index) in listOfHighQualityData" :key="index" @click="toPostDetailSell(item)"> -->
				<image :src="facadePicture(item)" class="post-item-img" mode="aspectFill" />
				<view class="post-item-title-mask">
					<view class="post-item-title">{{ item.area }}</view>
					<view class="post-item-sub-title">{{ item.area }}&nbsp;{{ item.street }}&nbsp;{{ item.acreage }}m2</view>
				</view>
				<view class="post-item-img-label">平台优选</view>
				<view class="post-item-money-wrap bh-row bh-justify-start bh-align-center">
					<view class="post-item-money-label">租</view>
					<view class="post-item-money">{{ item.rent }}</view>
					<view class="post-item-money-unit">/月</view>
					<view class="post-item-money-label">转</view>
					<view class="post-item-money">{{ item.transferFee ? getSimpleAmountValue(item.transferFee) : '面议' }}</view>
					<view class="post-item-money-unit">{{ item.transferFee ? getSimpleAmountUnit(item.transferFee) : '' }}</view>
				</view>
				<view v-if="item.labelDtoList && item.labelDtoList.length > 0" class="post-item-label-wrap bh-row bh-justify-start bh-align-center">
					<view v-for="(item1, index1) in item.labelDtoList" :key="index1" class="post-item-label">{{ item1.labelName }}</view>
				</view>
				<view class="post-item-comment-wrap bh-row bh-justify-start bh-align-center">
					<view class="post-item-comment-content"><text class="c0 fw600">老板说:</text> {{ item.content ? item.content : '空空如也～' }}</view>
				</view>
			</view>
			<BhLoadMore :status="tabLoadingStatus" @click-load-more="() => { }"></BhLoadMore>
			<view style="padding-top: 60rpx;" v-if="(!tabList[0].list || tabList[0].list.length <= 0) && tabLoadingStatus != 'loading'">
				<bh-no-more></bh-no-more>
			</view>
		</view>

		<!-- 转店身份 ----- 最近求租 -->
		<view v-if="isSell" class="request-rent-view">
			<view class="bh-row bh-justify-space-between mb40">
				<view class="c0 f32 fw600">最新求租</view>
				<view @click="navToPage('/PostPage/post_list_buy/post_list_buy_new')" class="c0 f24">
					<text class="mr10">更多</text>
					<image class="more" src="../../static/images/home/more.png" mode=""></image>
				</view>
			</view>
			<view class="list">
				<!-- v-if="!tabList[1].list || tabList[1].list.length <= 0" -->
				<view v-if="tabList[1].list && tabList[1].list.length > 0" class="mb40 f28 fw600 c9"></view>
				<!-- <view v-if="listOfLatest" class="mb40 f28 fw600 c9"></view> -->
				<view @click="checkDetail(item)" class="li bh-row bh-justify-space-between" v-for="(item, index) in tabList[1].list" :key="index">
					<!-- <view @click="checkDetail(item)" class="li bh-row bh-justify-space-between" v-for="(item, index) in listOfLatest" :key="index"> -->
					<view class="li-left bh-row bh-justify-space-between">
						<view class="li-img-view ml20">
							<image class="li-img" :src="item.userDto.avatarUrl" mode=""></image>
							<!-- <image class="li-hot-img" src="../../static/images/home/hot.png" mode=""></image> -->
						</view>
						<view class="">
							<view class="mb10 f28 fw600 c0 white-space1" style="max-width: 400rpx;">求租{{ item.area }}&nbsp;{{ item.street }}店铺</view>
							<view class="f24 c9">期望面积：{{ buyAcreage(item) }}</view>
						</view>
					</view>
					<view class="">
						<image class="li-right-img" src="../../static/images/home/right.png" mode=""></image>
					</view>
				</view>
				<BhLoadMore :status="tabLoadingStatus" @click-load-more="() => { }"></BhLoadMore>
				<!-- <view style="padding-top: 60rpx;" v-if="listOfLatestNoMore">
					<bh-no-more></bh-no-more>
				</view> -->
				<view style="padding-top: 60rpx;" v-if="(!tabList[1].list || tabList[1].list.length <= 0) && tabLoadingStatus != 'loading'">
					<bh-no-more></bh-no-more>
				</view>
			</view>
		</view>

		<!-- 底部占位 -->
		<view style="height: 162rpx;"></view>




		<!-- 蒙层------  -->

		<!-- 找铺提示第一步 -->
		<view v-if="guidanceStep1" class=" guidance-view1 bh-black-bg" style="background-color: rgba(0,0,0,.75);z-index: 9;">
			<view class="cf">
				点击这里，可以快速查找您要的店铺哦~
			</view>
			<view class="bh-medium-round-btn" @click="guidanceStep1 = false">
				我知道啦
			</view>
		</view>

		<!-- 找铺提示第二步 -->
		<view v-if="guidanceStep1 == false && guidanceStep2" class=" guidance-view2 bh-black-bg" style="background-color: rgba(0,0,0,.75);z-index: 9;">
			<view class="cf">
				点击这里，可以快速发布找铺信息哦~
			</view>
			<view class="bh-medium-round-btn" @click="guidanceStep2 = false">
				我知道啦
			</view>

		</view>

		<!-- 转铺提示 -->
		<view v-if="guidanceStep3" class=" guidance-view3 bh-black-bg" style="background-color: rgba(0,0,0,.75);z-index: 9;">
			<view class="cf">
				点击这里，可以快速发布您的商铺哦~
			</view>
			<view class="bh-medium-round-btn" @click="guidanceStep3 = false">
				我知道啦
			</view>
		</view>

		<!-- 可以修改昵称换新身份体验哦 -->
		<!-- <view v-if="guidanceStep1 == false && guidanceStep2 == false && guidanceStep3 == false && guidanceStep4" class="guidance-nickname  bh-row bh-justify-space-between " style="background-color: rgba(0,0,0,.75);z-index: 9;">
			<image  src="../../static/images/post_add/post_add_face.png" mode=""></image>
			<view class="">
				<view class="cf fw600 f32 mb10">欢迎来到乐铺多~</view>
				<view class="cf f24">可以修改昵称换新身份体验哦</view>
			</view>
			<view class="bh-small-round-btn" @click="()=>{navToPage('/pages/my/my_edit')}">马上修改</view>
		</view> -->

		<!-- “今天是加入好铺的第1天” -->
		<view v-if="joinIn" class="join-in bh-black-bg">
			<image class="join-in-black" src="../../static/images/home/join_in_black.png" mode=""></image>
			<view class="">
				<view class="mb40 f24 c9">“今天是加入乐铺多的第{{ joinDays }}天”</view>
				<view class="bh-round-btn mb40">发布您想要的店铺</view>
				<view class="bh-round-btn white-bh-round-btn">发布您想转的店铺</view>
			</view>
		</view>

		<!-- 底部导航 -->
		<BhTabbarfooternew current="0" :message-count="messageCount" @change-footer-tab="onChangeFooterTab"></BhTabbarfooternew>
		<show-add-post-sheet :show="showPostAdd" @close="() => { this.showPostAdd = false }"></show-add-post-sheet>

		<!-- <BhContact @click-contact="contactUs"></BhContact> -->

		<view class="tip-first-wrap">

		</view>
	</view>
</template>

<script type=ts>
import {
	Api
} from '../../api/api';
import {
	Dict
} from '../../components/custom_views/dict';
import BhTabbarfooternew from '../../components/custom_views/bh-tabbarfooternew.vue';
import showAddPostSheet from '../../components/custom_views/show-add-post-sheet.vue';
import bhNoMore from '../../components/custom_views/bh-no-more.vue';
import check_utils from '../../components/custom_views/check_utils';
import { PostUtils } from '@/components/post_item/post_add_sell_dto';
import { bhTabMixin } from '../../components/custom_views/mixin';
import { CustomDict } from '../../components/custom_views/custom_dict';
import { BackendApi } from '../../api/backend_api';
import BhLoadMore from '../../components/custom_views/bh-load-more.vue';

import BhContact from '../../components/custom_views/bh-contact.vue';
import { initImUserSig } from '../../imlogin';

import { TUILogin } from "@tencentcloud/tui-core";


export default {
	components: {
		BhTabbarfooternew,
		showAddPostSheet,
		bhNoMore,
		BhLoadMore,
		BhContact
	},
	mixins: [
		bhTabMixin
	],
	data() {
		return {
			...bhTabMixin.initData(0),
			tabList: [
				{
					param: {
						pageNum: 1,
						pageSize: 10,
						postMainType: Dict.PostMainTypeEnum.Shop.value,
						postType: Dict.PostMainTypeEnum.Shop.childs.ShopSell.value,
						highQuality: Dict.YesEnum.Yes.value,
						postStatus: CustomDict.PostStatusEnum.Agree.value
					},
					list: []
				},
				{
					param: {
						pageNum: 1,
						pageSize: 10,
						postMainType: Dict.PostMainTypeEnum.Shop.value,
						postType: Dict.PostMainTypeEnum.Shop.childs.ShopBuy.value,
						postStatus: CustomDict.PostStatusEnum.Agree.value
					},
					list: []
				}
			],
			showPageLoading: true,
			showPageReversing: false,
			joinDays: this.$store.getters.getJoinDays,
			userRoleId: this.getUserRole(),
			showPostAdd: false,
			capsule: {},
			titleHeight: 0,
			tappedGuidanceStep1: false,
			guidanceStep2: false,
			guidanceStep1: false,
			identity: 1,
			guidanceStep3: false,
			guidanceStep4: true,
			joinIn: false,
			listOfHighQualityData: [],
			listOfLatest: [],
			listOfHighQualityNoMore: false,
			listOfLatestNoMore: false,
			sessionDto: this.$store.state.sessionDto,
			noticeList: [{ id: 0, notice: '超值好店等你来选！' }, { id: 0, notice: '找铺无中介，免费发布，助您事业腾飞！' }],
		}
	},
	computed: {

		userRoleName() {
			if (this.userRoleId == Dict.PostMainTypeEnum.Shop.childs.ShopSell.value) {
				// todo 转店铺的角色
				return '切换找铺';
			} else if (this.userRoleId == Dict.PostMainTypeEnum.Shop.childs.ShopBuy.value) {
				// todo 找店铺的角色
				return '切换转铺';
			}
		},
		isSell() {
			return this.userRoleId == Dict.PostMainTypeEnum.Shop.childs.ShopSell.value
		},
		isBuy() {
			return this.userRoleId == Dict.PostMainTypeEnum.Shop.childs.ShopBuy.value
		},
		messageCount() {
			let count = this.$store.state.sessionDto.unreadCommentNumber + this.$store.state.sessionDto.metricRecordDtoMap.beenAddCollectNumber
			console.log('消息未读数', count)
			return count
		}
	},

	onShareTimeline(res) {
      return {
              title: "乐铺多｜让转铺找铺变的简单",// 分享的标题
              path: '/pages/home/home', // 分享的页面路径
              imageUrl: '/static/images/newlogo.png' // 封面图片路径
          }
  },

	// 页面周期函数--监听页面加载
	onLoad(options) {
		console.log('校验手机号个你', check_utils.isMobilePhone('13651260420'))
		console.log('首页参数onLoad加载', options, this.currentTabIndex)
		// this.navToPage('/pages/post_list_sell/post_list_sell')
		// return
		if (this.$store.state.sessionDto && this.$store.state.sessionDto.userDto && this.$store.state.sessionDto.userDto.userId) {
			this.showPageLoading = false
		}
		this.initApiData(options)
		let capsule = this.capsule = wx.getMenuButtonBoundingClientRect()
		console.log(capsule)
		this.titleHeight = capsule.height + 10 + capsule.top
		
		// uni.navigateTo({
		//   url: '/pages/post_add_sell/post_add_sell'
		// })
	},
	methods: {
		contactUs() {
			console.log('联系客服')
		},
		previewGroup1Qr(){
			uni.previewImage({
        current: 0,
        urls: ['https://bh-cmty-1256284809.cos.ap-beijing.myqcloud.com/lepuduo/lepuduo_group1_qr.jpg?t=' + new Date().getTime()]
      })
		},
		requestData(params) {
			if (this.userRoleId == Dict.PostMainTypeEnum.Shop.childs.ShopSell.value) {
				// if(params.pageNum == 1 && this.$store.state.homePostList.postSellList.length > 0){
				// 	return 
				// }

				// todo 转店铺的角色
				return BackendApi.v05_post_list(params, false)
			} else if (this.userRoleId == Dict.PostMainTypeEnum.Shop.childs.ShopBuy.value) {
				console.log('开始请求数据', this.currentTabIndex)
				// this.currentTabIndex = 1
				// params.pageNum = 1
				return BackendApi.v05_post_list(params, false)
			}
		},
		buyAcreage(item) {
			if (item.upperAcreage >= 10000) {
				return '不限'
			} else {
				return item.lowerAcreage + '-' + item.upperAcreage + '㎡'
			}
		},
		selectCity() {
			check_utils.showCustToast('当前仅支持北京地区用户哦～')
		},
		facadePicture(item) {
			if (item.facadePicture) {
				return item.facadePicture.split(',')[0]
			} else {
				return '../../static/images/default_img.png'
			}
		},
		reverseUserRoleId() {
			let that = this

			this.showPageReversing = true
			setTimeout(() => {
				if (that.userRoleId == Dict.PostMainTypeEnum.Shop.childs.ShopSell.value) {
					// todo 转店铺的角色
					that.userRoleId = Dict.PostMainTypeEnum.Shop.childs.ShopBuy.value
					this.currentTabIndex = 0
				} else if (that.userRoleId == Dict.PostMainTypeEnum.Shop.childs.ShopBuy.value) {
					// todo 找店铺的角色
					that.userRoleId = Dict.PostMainTypeEnum.Shop.childs.ShopSell.value
					this.currentTabIndex = 1
				}
				that.updateUserRole(that.userRoleId)
				that.showPageReversing = false
			}, 300);
			// this.initApiData()
		},
		initGuandance() {
			if (this.isFirstLogin() && this.userRoleId == Dict.PostMainTypeEnum.Shop.childs.ShopBuy.value) {
				this.guidanceStep1 = true
				this.guidanceStep2 = true
			} else if (this.isFirstLogin()) {
				this.guidanceStep3 = true
			}
		},
		initApiData(options) {
			console.log('页面参数1', options)
			let that = this


			// console.log('判断是否首次登陆', Api.LoginApi.isFirstLogin(that))
			// if (Api.LoginApi.isFirstLogin(that) && options.fromHomeBefore != '1' && options.fromMyMessage != '1') {
			// 	uni.redirectTo({
			// 		url: '/pages/home/home_before'
			// 	})
			// 	return
			// }
			// if (options.fromMyMessage != '1') {
			// 	this.initGuandance()
			// }


			// 保存角色：Api.UserApi.updateUserRole(角色字典值)
			// 获取角色：Api.UserApi.getUserRole()
			// 公告列表：Api.NoticeApi.list()
			// 优选店铺列表：Api.PostSellApi.listOfHighQuality()
			// 最新求租列表：Api.PostBuyApi.listOfLatest(最新的条数)
			// 刷新我的页面中的数据：Api.MyApi.refresh()   主要获取收藏数、曝光数、等这些信息
			/*** TODO 获取当前角色 **/
			let userRoleId = this.getUserRole()
			console.log('从storage中获取当前角色信息Id', userRoleId)
			if (userRoleId == Dict.PostMainTypeEnum.Shop.childs.ShopSell.value) {
				// todo 转店铺的角色
				that.userRoleId = userRoleId
			} else if (userRoleId == Dict.PostMainTypeEnum.Shop.childs.ShopBuy.value) {
				// todo 找店铺的角色
				that.userRoleId = userRoleId
			}

			Api.LoginApi.login(that, (res) => {

				// 判断用户是否首次登录及。
				if (res.data && res.data.firstLogin && res.data.firstLogin == 1) {
					// 首次登录
					uni.redirectTo({
						url: '/pages/home/home_before'
					})
					return
				}
				// 从before home 页面跳转而来，展示提示信息
				if (options.fromHomeBefore == '1') {
					this.initGuandance()
				}
				
				// im登陆
				if(!uni.$chat_userSig){
					initImUserSig({imUserId: res.data.imUserId, imUserSig: res.data.imUserSig}, (res)=>{
						that.imLogin()
					})
				}else{
					that.imLogin()
				}
				that.showPageLoading = false
				// that.initGuandance()
				uni.setStorageSync('firstLogin', 1)
				if (!Api.LoginApi.nickNameUpdated(that)) {
					that.guidanceStep4 = true
				}
				/** todo 刷新我的页面中的数据 */
				Api.MyApi.refresh(that, (res) => {

				}, false)

				/** todo 获取公告列表 */
				Api.NoticeApi.list((res) => {
					if (res.code == 200) {
						if (res.data && res.data.length > 0) {
							// let aa = []
							// aa.map
							// 超值好sdk啥地方就是烧烤的飞机水电费水...
							that.noticeList = res.data.map(notice => {
								return {
									id: notice.id,
									notice: notice.notice.length > 19 ? notice.notice.substring(0, 19) + '...' : notice.notice
								}
							})
							// that.noticeList = res.data.map(notice => notice.notice.substring(0,20))
						} else {
							that.noticeList = that.noticeList.map(notice => {
								return {
									id: notice.id,
									notice: notice.notice.length > 19 ? notice.notice.substring(0, 19) + '...' : notice.notice
								}
							})
						}
					}
				}, false)
				/** todo 刷新我发布的发帖到缓存中 */
				Api.MyApi.listOfMy(that, (res) => {

				}, false)
				/** todo 优选店铺列表 */
				this.getTabData(0, true)
				// Api.PostSellApi.listOfHighQuality(that, (res) => {
				// }, false)
				/** todo 最新求租列表 */
				this.getTabData(1, true)
				// Api.PostBuyApi.listOfLatest(that, {}, (res) => {
				// }, false)

			}, false)


			/** 获取城市列表信息，缓存 */
			Api.ConstantApi.areaStreetList(this.$store.state.currentRegion.cityCode, (res) => {

			}, false)

		},
		imLogin(){
			// if(uni.$chat_logined == false){
			// 	console.log('首页im loging start')
			// 	TUILogin.login({
			// 	  SDKAppID: uni.$chat_SDKAppID,
			// 	  userID: uni.$chat_userID,
			// 	  // UserSig 是用户登录即时通信 IM 的密码，其本质是对 UserID 等信息加密后得到的密文。
			// 	  // 该方法仅适合本地跑通 Demo 和功能调试，详情请参见 https://cloud.tencent.com/document/product/269/32688     
			// 	  userSig: uni.$chat_userSig, 
			// 	  // 如果您需要发送图片、语音、视频、文件等富媒体消息，请设置为 true
			// 	  useUploadPlugin: true,
			// 	  // 本地审核可识别、处理不安全、不适宜的内容，为您的产品体验和业务安全保驾护航
			// 	  // 此功能为增值服务，请参考：https://cloud.tencent.com/document/product/269/79139
			// 	  // 如果您已购买内容审核服务，开启此功能请设置为 true
			// 	  useProfanityFilterPlugin: false,
			// 	  framework: 'vue3' // 当前开发使用框架 vue2 / vue3
			// 	}).then(() => {
			// 		console.log('首页TUILogin.login success')
			// 		uni.$chat_logined = true;
			// 	}).finally(()=>{
			// 		console.log('首页im loging end')
			// 	});
			// }else{
			// 	console.log('首页TUILogin.login has been logined')
			// }
		},
		onChangeFooterTab(footerTab) {
			console.log('点击的footer信息', footerTab)
			if (footerTab.index == 1) {
				this.showPostAdd = true
				// this.joinIn = true
			} else if (footerTab.index == 2) {
				// let sessionDto = this.$store.state.sessionDto
				// sessionDto.unreadCommentNumber = 0
				// sessionDto.metricRecordDtoMap.collectNumber = 0
				// this.$store.commit('updateSessionDto', sessionDto)
				uni.redirectTo({
					url: '/pages/my/my'
				})

			}
		},
		chooseCancel() {
			this.showPostAdd = false;
		},
		//跳转详情---后续加上data参数
		checkDetail(item) {
			let detailJson = encodeURIComponent(JSON.stringify(item))
			uni.navigateTo({
				url: '/PostPage/post_detail_buy/post_detail_buy?detailJson=' + detailJson + '&postId=' + item.id
			})
		},
		toPostDetailSell(item) {
			let detailJson = encodeURIComponent(JSON.stringify(item))
			uni.navigateTo({
				url: '/PostPage/post_detail_sell/post_detail_sell?detailJson=' + detailJson + '&postId=' + item.id
			})
		}
	},
	watch: {},
	onPullDownRefresh() {
		this.initApiData({})
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	onReachBottom() {
		console.log('触底了', this.currentTabIndex)
		if (this.currentTabIndex == 0) {
			this.scrolltolower()
		}
	},
	// 页面周期函数--监听页面初次渲染完成
	onReady() { },
	// 页面周期函数--监听页面显示(not-nvue)
	onShow() { },
	// 页面周期函数--监听页面隐藏
	onHide() { },
	// 页面周期函数--监听页面卸载
	onUnload() { },
	// 页面处理函数--监听用户下拉动作
	// onPullDownRefresh() { uni.stopPullDownRefresh(); },
	// 页面处理函数--监听用户上拉触底
	// onReachBottom() {},
	// 页面处理函数--监听页面滚动(not-nvue)
	// onPageScroll(event) {},
	// 页面处理函数--用户点击右上角分享
	// onShareAppMessage(options) {},
}
</script>

<style scoped lang="scss">
@import url(../../static/css/base.css);

.page-loading {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 100;
	background-color: white;
	left: 0;
	right: 0;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.role-reversing {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 100;
	background-color: white;
	left: 0;
	right: 0;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.2;
	background-color: #333;
}

.guidance-nickname {
	position: fixed;
	left: 48rpx;
	bottom: 170rpx;
	width: 654rpx;
	height: 128rpx;
	border-radius: 24rpx;
	background: rgba(0, 0, 0, 0.75);
	padding-right: 30rpx;
	box-sizing: border-box;

	image {
		width: 118rpx;
		height: 109rpx;
		margin-left: 10rpx;
		margin-bottom: -48rpx;
	}
}

.join-in {
	.join-in-black {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 552rpx;
	}

	>view {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 450rpx;
		z-index: 2;
		padding: 0 70rpx;
		text-align: center;
		box-sizing: border-box;
	}

	.white-bh-round-btn {
		background-color: #fff;
		color: #000;
	}
}

.pagefixed {
	height: 100vh;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
}

page {
	height: 100vh;
}

.request-rent-view {
	margin: 40rpx 32rpx 20rpx 32rpx;

	.list {
		padding: 32rpx;
		background-color: #fff;
		border-radius: 16rpx;
		// box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
	}

	.more {
		width: 12rpx;
		height: 14rpx;
	}

	.li {
		margin-bottom: 24rpx;
		border-bottom: 1px solid #f5f5f5;
		    padding-bottom: 24rpx;
	}

	.li-left {
		.li-img-view {
			width: 104rpx;
			height: 104rpx;
			border-radius: 104rpx;
			position: relative;
			background-color: #e8e8e8;
			margin-right: 20rpx;
		}

		.li-hot-img {
			width: 40rpx;
			height: 59rpx;
			position: absolute;
			left: -4rpx;
			top: 6rpx;
			z-index: 1;
		}

		.li-img {
			width: 104rpx;
			height: 104rpx;
			border-radius: 50%;
			position: absolute;
			// right: 12rpx;
			top: 0;
		}
	}

	.li-right-img {
		width: 40rpx;
		height: 40rpx;
	}
}

.banner-wrap-active {
	position: relative;
	z-index: 20;

	.banner-img {
		position: relative;
		z-index: 21;
	}

	.guidance3 {
		width: 706rpx;
		height: 438rpx;
		position: absolute;
		left: 0rpx;
		top: -68rpx;
		z-index: 20;
	}
}

.banner-wrap {
	margin: -10rpx 25rpx 10rpx 25rpx;

	image {
		width: 696rpx;
		height: 292rpx;
	}

}

.title_view {
	.title {
		height: 40rpx;
		font-size: 36rpx;
		color: #000;
		padding: 0 32rpx 10px 32rpx;
		box-sizing: border-box;
		background: linear-gradient(171deg, #FFF6D4 19%, #F5F9FA 50%);
		background-color: #F5F9FA;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;

		.address_down.png {
			width: 24rpx;
			height: 24rpx;
		}

		.edit-info {
			border-radius: 32rpx;
			width: 174rpx;
			text-align: center;
			font-size: 32rpx;
			border: 1rpx solid #ddd;
			justify-content: center;
			box-sizing: border-box;
		}
	}
}

.container {
	background-color: #F5F9FA;
	width: 100%;
	height: 100vh;
}

.menu-wrap-active {
	.guidance1 {
		width: 478rpx;
		height: 445rpx;
		position: absolute;
		left: -19rpx;
		top: -108rpx;
		z-index: 22;
	}

	.guidanceStep1_view {
		width: 460rpx;
		height: 226rpx;
		position: absolute;
		left: -10rpx;
		top: 15rpx;
		z-index: 19;
		border-radius: 10rpx;
		background-color: #F5F9FA;
	}

	.menu-item {
		position: relative;
		z-index: 20;

		&:last-child {
			z-index: 0;
		}
	}
}

.identity2-menu-wrap {
	margin: 20rpx 32rpx 0rpx 32rpx;

	.menu-item {
		box-sizing: border-box;
		width: 330rpx;
		padding-top: 40rpx;
		padding-left: 64rpx;
		border-radius: 16rpx;
		height: 224rpx;
		background: #FFFFFF;
		box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);

		.menu-icon {
			width: 80rpx;
			height: 78rpx;
		}

		.menu-title {
			font-size: 28rpx;
			font-weight: 600;
			margin-top: 20rpx;
			margin-bottom: 36rpx;
			color: rgba(0, 0, 0, 0.85);
		}
	}
}

.menu-wrap {
	padding-top: 20rpx;
	margin: 0 32rpx 30rpx 32rpx;
	position: relative;

	.menu-item {
		text-align: center;
		border-radius: 16rpx;
		height: 220rpx;
		background: #FFFFFF;
		box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);

		.menu-icon {
			width: 80rpx;
			height: 78rpx;
			margin-top: 46rpx;
			margin-left: 64rpx;
			margin-right: 64rpx;
		}

		.menu-title {
			font-size: 28rpx;
			font-weight: 600;
			margin-top: 28rpx;
			margin-bottom: 44rpx;
			color: rgba(0, 0, 0, 0.85);
		}
	}
}

.guidance-view1 {
	padding-top: 550rpx;
	text-align: center;

	.bh-medium-round-btn {
		margin: 30rpx auto;
	}
}

.guidance-view2 {
	padding-top: 800rpx;
	text-align: center;

	.bh-medium-round-btn {
		margin: 30rpx auto;
	}
}

.guidance-view3 {
	padding-top: 800rpx;
	text-align: center;

	.bh-medium-round-btn {
		margin: 30rpx auto;
	}
}

@keyframes guidanceShow {
	0% {
		opacity: 0;

	}

	100% {
		opacity: 1;
	}
}

.lead-wrap-active {
	position: relative;
	z-index: 20;
	animation: guidanceShow 1s;

	.guidance2 {
		width: 706rpx;
		height: 438rpx;
		position: absolute;
		left: -10rpx;
		top: -122rpx;
		z-index: 22;
	}

	.lead-title-wrap {
		position: relative;
		z-index: 20;

	}
}

.lead-wrap {
	margin: 20rpx 32rpx;
	height: 216rpx;
	border-radius: 16rpx;
	position: relative;
	background: linear-gradient(270deg, #D6E6FE 8%, #D6ECFE 50%, #DEF2FF 90%);

	.lead-title-wrap {

		.lead-title {
			font-size: 40rpx;
			font-weight: 900;
			color: #274FF5;
			margin-bottom: 18rpx;
			margin-left: 50rpx;
		}

		.lead-sub-title {
			font-size: 24rpx;
			font-weight: normal;
			color: #274FF5;
			margin-top: 18rpx;
			margin-left: 50rpx;
		}
	}

	.lead-img {
		width: 290rpx;
		height: 170rpx;
		position: absolute;
		right: 0;
		bottom: -10rpx;
	}

}

.notice-wrap {
	margin-left: 32rpx;
	margin-right: 32rpx;
	height: 80rpx;
	border-radius: 16rpx;
	background: #FFFFFF;
	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);

	.notice-img {
		width: 32rpx;
		height: 32rpx;
		margin-left: 32rpx;
		display: block;
		margin-right: 20rpx;
	}

	.notice-swiper {
		font-size: 28rpx;
		font-weight: normal;

		color: #333333;
	}
}

.post-wrap {
	margin-top: 32rpx;

	.post-title {
		margin-left: 32rpx;
		font-size: 32rpx;
		font-weight: bold;

		color: rgba(0, 0, 0, 0.85);
		margin-bottom: 32rpx;
	}

	.post-item {
		margin: 0 32rpx 20rpx 32rpx;
		position: relative;
		border-radius: 16rpx;
		background: #FFFFFF;
		padding-bottom: 1rpx;
		// box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
		box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.1);

		.post-item-img {
			width: 686rpx;
			width: 100%;
			height: 294rpx;
			border-radius: 16rpx;
		}

		.post-item-title-mask {
			position: absolute;
			top: 158rpx;
			left: 0;
			right: 0;
			height: 136rpx;
			background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 80%);

			.post-item-title {
				font-size: 28rpx;
				font-weight: 500;
				margin-top: 30rpx;
				margin-left: 31rpx;
				color: #FFFFFF;
			}

			.post-item-sub-title {
				font-size: 24rpx;
				font-weight: normal;
				margin-top: 16rpx;
				margin-left: 31rpx;
				margin-bottom: 20rpx;
				color: #FFFFFF;
			}
		}



		.post-item-img-label {
			// position: absolute;
			// right: 0;
			// top: 32rpx;
			// font-size: 24rpx;
			// font-weight: 600;
			// padding: 8rpx 10rpx 8rpx 22rpx;
			// opacity: 1;
			// border-top-left-radius: 30rpx;
			// border-bottom-left-radius: 30rpx;
			// background: #F8D247;

			position: absolute;
			/* right: 0; */
			top: 16rpx;
			font-size: 24rpx;
			font-weight: 600;
			padding: 8rpx 22rpx 8rpx 10rpx;
			opacity: 1;
			border-top-right-radius: 30rpx;
			border-bottom-right-radius: 30rpx;
			background: #F8D247;
		}

		.post-item-money-wrap {
			margin-top: 32rpx;

			.post-item-money-label {
				margin-left: 32rpx;
				border-radius: 4rpx;
				/* padding: 4rpx 4rpx 6rpx 4rpx; */
				box-sizing: border-box;
				border: 1px solid #F87147;
				font-size: 22rpx;
				font-weight: normal;
				color: #F87147;
				width: 32rpx;
				height: 32rpx;
				text-align: center;
				align-items: center;
				display: flex;
				justify-content: center;

			}

			.post-item-money {
				margin-left: 16rpx;
				font-weight: bold;
				color: #EF2D2D;

				/* 20000 */
				font-weight: 700;
				font-size: 36rpx;
			}

			.post-item-money-unit {
				color: #EF2D2D;
				font-weight: 400;
				font-size: 24rpx;
			}
		}

		.post-item-label-wrap {
			margin-top: 32rpx;
			margin-top: 32rpx;
			flex-wrap: wrap;

			.post-item-label {
				margin-left: 32rpx;
				border-radius: 4rpx;
				padding: 8rpx 16rpx;
				background: #F5F6F6;
				font-size: 24rpx;
				font-weight: 600;
				color: #666;
				margin-bottom: 16rpx;
			}
		}

		.post-item-comment-wrap {
			margin-left: 16rpx;
			margin-right: 16rpx;
			margin-top: 32rpx;
			margin-bottom: 32rpx;
			padding: 28rpx 20rpx;
			border-radius: 16rpx;

			background: #F5F6F6;

			.post-item-comment-content {
				font-weight: 500;
				font-size: 24rpx;
				color: rgba(0, 0, 0, 0.5);
			}
		}

	}
}
</style>